<template>
    <!-- 测试样式用 -->
    <div class="test-box">
        <div>
            <!-- 上传文件组件 -->
            <el-button type="primary" @click="uploadBus">上传</el-button>
        </div>
        <div>
            <!-- 自定义懒加载表格组件 -->
            <DropDownTable :disposition="disposition" :columnData="columnData" :tableData="tableData"
                :totalItems="totalItems" @loadMore="loadMore" @clearData="clearData">
                <template #columns>
                    <el-table-column prop="customField" label="自定义列"></el-table-column>
                </template>
            </DropDownTable>
        </div>
        <div id="container"></div>
    </div>
</template>
<script>
import DropDownTable from "@/components/DropDownTable/index.vue"
import { getToken } from "@/utils/auth";
import { mapState } from "vuex";
import { Graph, Cell } from '@antv/x6'
import ELK, { ElkNode, ElkEdge, ElkExtendedEdge } from 'elkjs'
export default {
    data() {
        return {
            test: "test",
            disposition: {
                select: true,
                index: true
            },
            columnData: [
                {
                    fieldName: "name",
                    name: "名称",
                    width: 300,
                },
                {
                    fieldName: "address",
                    name: "详情",
                    width: 500,
                },
                {
                    fieldName: "date",
                    name: "更新时间",
                    width: 200,
                },
            ],
            tableData: Array.from({ length: 10 }, (_, index) => ({
                id: index,
                name: `User ${index + 1}`,
                date: `Date ${index + 1}`,
                address: `xxxxxxxxxxxxxxxxxxxxxxx ${index + 1}`,
            })),
            totalItems: 100,
            graph: null,
            elk: null,
            portIdToNodeIdMap: {},
            cells: [],
        };
    },
    components: {
        DropDownTable
    },
    mounted() {
        // 上传文件组件
        this.$EventBus.$on('fileSuccess', response => {
            if (response.code != 200) {
                this.$message.error(response.msg)
                return
            }
            this.$message.success('上传成功');
        });
        // x6
        Graph.registerNode(
            'elk-node',
            {
                inherit: 'rect',
                attrs: {
                    body: {
                        fill: '#EFF4FF',
                        stroke: '#5F95FF',
                        strokeWidth: 1,
                    },
                    label: {
                        refX: 0,
                        refY: -4,
                        textAnchor: 'start',
                        textVerticalAnchor: 'bottom',
                        fontSize: 10,
                    },
                },
                ports: {
                    groups: {
                        port: {
                            position: {
                                name: 'absolute',
                            },
                            attrs: {
                                portBody: {
                                    magnet: 'passive',
                                    fill: '#5F95FF',
                                    refWidth: '100%',
                                    refHeight: '100%',
                                },
                            },
                            markup: [
                                {
                                    tagName: 'rect',
                                    selector: 'portBody',
                                },
                            ],
                        },
                    },
                },
            },
            true,
        )

        Graph.registerEdge(
            'elk-edge',
            {
                inherit: 'edge',
                attrs: {
                    line: {
                        stroke: '#A2B1C3',
                        strokeWidth: 1,
                        targetMarker: {
                            name: 'block',
                            width: 4,
                            height: 4,
                        },
                    },
                },
            },
            true,
        )

        // 初始化 Graph 和 ELK
        this.graph = new Graph({
            container: document.getElementById('container'),
            interacting: false,
        })

        this.elk = new ELK()

        // 添加节点和边的方法
        this.addChildren = (children, pos) => {
            children.forEach((child) => {
                const position = {
                    x: (child.x || 0) + (pos ? pos.x : 0),
                    y: (child.y || 0) + (pos ? pos.y : 0),
                }
                let label = ''
                if (typeof child.labels === 'string') {
                    label = child.labels
                } else if (Array.isArray(child.labels) && child.labels[0]) {
                    label = child.labels[0].text
                }
                const node = this.graph.createNode({
                    shape: 'elk-node',
                    id: child.id,
                    position,
                    label,
                    size: {
                        width: child.width || 0,
                        height: child.height || 0,
                    },
                    ports: {
                        items: (child.ports || []).map((item) => {
                            this.portIdToNodeIdMap[item.id] = child.id
                            return {
                                id: item.id,
                                group: 'port',
                                args: {
                                    x: item.x,
                                    y: item.y,
                                },
                                size: {
                                    width: item.width || 0,
                                    height: item.height || 0,
                                },
                            }
                        }),
                    },
                })

                this.cells.push(node)

                if (child.children) {
                    this.addChildren(child.children, position)
                }

                if (child.edges) {
                    this.addEdges(child.edges, position)
                }
            })
        }

        this.addEdges = (edges, pos) => {
            edges.forEach((edge) => {
                const { bendPoints = [] } = edge.sections[0]

                if (pos) {
                    bendPoints.map((bendPoint) => {
                        bendPoint.x += pos.x
                        bendPoint.y += pos.y
                    })
                }

                const sourcePortId = edge.sources[0]
                const targetPortId = edge.targets[0]
                const sourceNodeId = this.portIdToNodeIdMap[sourcePortId]
                const targetNodeId = this.portIdToNodeIdMap[targetPortId]

                this.cells.push(
                    this.graph.createEdge({
                        shape: 'elk-edge',
                        source: {
                            cell: sourceNodeId,
                            port: sourcePortId,
                        },
                        target: {
                            cell: targetNodeId,
                            port: targetPortId,
                        },
                        vertices: bendPoints,
                    }),
                )
            })
        }

        // 获取数据并布局
        // fetch('/data/test.json')
        //     .then((response) => response.json())
        //     .then((data) => {
        //         this.elk.layout(data).then((res) => {
        //             this.addChildren(res.children || [])
        //             this.addEdges(res.edges || [])
        //             this.graph.resetCells(this.cells)
        //             this.graph.zoomToFit({
        //                 padding: 20,
        //                 maxScale: 1,
        //             })
        //         })
        //     })
        this.elk.layout({
            "id": "n0",
            "children": [
                {
                    "id": "n1",
                    "labels": "DatagramReader",
                    "ports": [
                        {
                            "id": "p1",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "1"
                            }
                        },
                        {
                            "id": "p3",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "2"
                            }
                        },
                        {
                            "id": "p4",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "3"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 40
                },
                {
                    "id": "n2",
                    "labels": [
                        {
                            "text": "Ramp",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 50,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g837978",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g739884",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "1"
                            }
                        },
                        {
                            "id": "p3_g539420",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "2"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 40
                },
                {
                    "id": "n3",
                    "labels": [
                        {
                            "text": "QueueControl",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 100,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g572291",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g653563",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "1"
                            }
                        },
                        {
                            "id": "p3_g722216",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "2"
                            }
                        },
                        {
                            "id": "p4_g748499",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "3"
                            }
                        },
                        {
                            "id": "p5",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "4"
                            }
                        },
                        {
                            "id": "p6",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "5"
                            }
                        },
                        {
                            "id": "p7",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "6"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 40
                },
                {
                    "id": "n4",
                    "labels": [
                        {
                            "text": "Display",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 35,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g255145",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 35,
                    "height": 27
                },
                {
                    "id": "n5",
                    "labels": [
                        {
                            "text": "Interface - fast",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 10,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g820682",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g506569",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "1"
                            }
                        }
                    ],
                    "children": [
                        {
                            "id": "n6",
                            "labels": [
                                {
                                    "text": "Sleep",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 50,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g582202",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g036217",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g791687",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "SOUTH",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 50,
                            "height": 35
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "edges": [
                        {
                            "id": "e15",
                            "sources": [
                                "p1_g820682"
                            ],
                            "targets": [
                                "p1_g582202"
                            ]
                        },
                        {
                            "id": "e16",
                            "sources": [
                                "p2_g036217"
                            ],
                            "targets": [
                                "p2_g506569"
                            ]
                        }
                    ]
                },
                {
                    "id": "n7",
                    "labels": [
                        {
                            "text": "Interface - slow",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 100,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g261431",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g518944",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "1"
                            }
                        }
                    ],
                    "children": [
                        {
                            "id": "n8",
                            "labels": [
                                {
                                    "text": "Sleep",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 50,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g587373",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g014361",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g749816",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "SOUTH",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 50,
                            "height": 35
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "edges": [
                        {
                            "id": "e17",
                            "sources": [
                                "p1_g261431"
                            ],
                            "targets": [
                                "p1_g587373"
                            ]
                        },
                        {
                            "id": "e18",
                            "sources": [
                                "p2_g014361"
                            ],
                            "targets": [
                                "p2_g518944"
                            ]
                        }
                    ]
                },
                {
                    "id": "n9",
                    "labels": [
                        {
                            "text": "Counter - q1",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 55,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g650325",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g732355",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "1"
                            }
                        },
                        {
                            "id": "p3_g158827",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "2"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 35
                },
                {
                    "id": "n10",
                    "labels": [
                        {
                            "text": "Counter - q2",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 55,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g006148",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        },
                        {
                            "id": "p2_g008338",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "1"
                            }
                        },
                        {
                            "id": "p3_g606176",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "EAST",
                                "port.index": "2"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 35
                },
                {
                    "id": "n11",
                    "labels": [
                        {
                            "text": "channel1",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 50,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g044769",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        }
                    ],
                    "children": [
                        {
                            "id": "n12",
                            "labels": [
                                {
                                    "text": "Counter",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 75,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g924853",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g825798",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g627665",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 55,
                            "height": 35
                        },
                        {
                            "id": "n13",
                            "labels": [
                                {
                                    "text": "RecordAssembler",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 100,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g710134",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g774554",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g935869",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 10,
                            "height": 40
                        },
                        {
                            "id": "n14",
                            "labels": [
                                {
                                    "text": "Display",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 50,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g849516",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 35,
                            "height": 27
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "edges": [
                        {
                            "id": "e19",
                            "sources": [
                                "p1_g044769"
                            ],
                            "targets": [
                                "p2_g825798"
                            ]
                        },
                        {
                            "id": "e20",
                            "sources": [
                                "p3_g627665"
                            ],
                            "targets": [
                                "p1_g710134"
                            ]
                        },
                        {
                            "id": "e21",
                            "sources": [
                                "p1_g044769"
                            ],
                            "targets": [
                                "p2_g774554"
                            ]
                        },
                        {
                            "id": "e22",
                            "sources": [
                                "p3_g935869"
                            ],
                            "targets": [
                                "p1_g849516"
                            ]
                        }
                    ]
                },
                {
                    "id": "n15",
                    "labels": [
                        {
                            "text": "channel2",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 50,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g598580",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        }
                    ],
                    "children": [
                        {
                            "id": "n16",
                            "labels": [
                                {
                                    "text": "Counter",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 75,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g439211",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g586159",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g324437",
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 55,
                            "height": 35
                        },
                        {
                            "id": "n17",
                            "labels": [
                                {
                                    "text": "RecordAssembler",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 100,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g816526",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                },
                                {
                                    "id": "p2_g800534",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "1"
                                    }
                                },
                                {
                                    "id": "p3_g930851",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "EAST",
                                        "port.index": "2"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 10,
                            "height": 40
                        },
                        {
                            "id": "n18",
                            "labels": [
                                {
                                    "text": "Display",
                                    "layoutOptions": {
                                        "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                                    },
                                    "width": 50,
                                    "height": 12
                                }
                            ],
                            "ports": [
                                {
                                    "id": "p1_g183964",
                                    "width": 7,
                                    "height": 7,
                                    "layoutOptions": {
                                        "port.side": "WEST",
                                        "port.index": "0"
                                    }
                                }
                            ],
                            "layoutOptions": {
                                "portConstraints": "FIXED_ORDER"
                            },
                            "width": 35,
                            "height": 27
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "edges": [
                        {
                            "id": "e23",
                            "sources": [
                                "p1_g598580"
                            ],
                            "targets": [
                                "p2_g586159"
                            ]
                        },
                        {
                            "id": "e24",
                            "sources": [
                                "p3_g324437"
                            ],
                            "targets": [
                                "p1_g816526"
                            ]
                        },
                        {
                            "id": "e25",
                            "sources": [
                                "p1_g598580"
                            ],
                            "targets": [
                                "p2_g800534"
                            ]
                        },
                        {
                            "id": "e26",
                            "sources": [
                                "p3_g930851"
                            ],
                            "targets": [
                                "p1_g183964"
                            ]
                        }
                    ]
                },
                {
                    "id": "n19",
                    "labels": [
                        {
                            "text": "MonitorValue - q1 length",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 150,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g445341",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 40
                },
                {
                    "id": "n20",
                    "labels": [
                        {
                            "text": "MonitorValue - q2 length",
                            "layoutOptions": {
                                "nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]"
                            },
                            "width": 150,
                            "height": 12
                        }
                    ],
                    "ports": [
                        {
                            "id": "p1_g930680",
                            "width": 7,
                            "height": 7,
                            "layoutOptions": {
                                "port.side": "WEST",
                                "port.index": "0"
                            }
                        }
                    ],
                    "layoutOptions": {
                        "portConstraints": "FIXED_ORDER"
                    },
                    "width": 55,
                    "height": 40
                }
            ],
            "edges": [
                {
                    "id": "e0",
                    "sources": [
                        "p3"
                    ],
                    "targets": [
                        "p2_g739884"
                    ]
                },
                {
                    "id": "e1",
                    "sources": [
                        "p3_g539420"
                    ],
                    "targets": [
                        "p2_g653563"
                    ]
                },
                {
                    "id": "e2",
                    "sources": [
                        "p5"
                    ],
                    "targets": [
                        "p1_g255145"
                    ]
                },
                {
                    "id": "e3",
                    "sources": [
                        "p6"
                    ],
                    "targets": [
                        "p1_g820682"
                    ]
                },
                {
                    "id": "e4",
                    "sources": [
                        "p7"
                    ],
                    "targets": [
                        "p1_g261431"
                    ]
                },
                {
                    "id": "e5",
                    "sources": [
                        "p6"
                    ],
                    "targets": [
                        "p2_g732355"
                    ]
                },
                {
                    "id": "e6",
                    "sources": [
                        "p2_g506569"
                    ],
                    "targets": [
                        "p1_g650325"
                    ]
                },
                {
                    "id": "e7",
                    "sources": [
                        "p7"
                    ],
                    "targets": [
                        "p2_g008338"
                    ]
                },
                {
                    "id": "e8",
                    "sources": [
                        "p2_g518944"
                    ],
                    "targets": [
                        "p1_g006148"
                    ]
                },
                {
                    "id": "e9",
                    "sources": [
                        "p2_g506569"
                    ],
                    "targets": [
                        "p1_g044769"
                    ]
                },
                {
                    "id": "e10",
                    "sources": [
                        "p2_g518944"
                    ],
                    "targets": [
                        "p1_g598580"
                    ]
                },
                {
                    "id": "e11",
                    "sources": [
                        "p3_g158827"
                    ],
                    "targets": [
                        "p1_g445341"
                    ]
                },
                {
                    "id": "e12",
                    "sources": [
                        "p1_g445341"
                    ],
                    "targets": [
                        "p3_g722216"
                    ]
                },
                {
                    "id": "e13",
                    "sources": [
                        "p3_g606176"
                    ],
                    "targets": [
                        "p1_g930680"
                    ]
                },
                {
                    "id": "e14",
                    "sources": [
                        "p1_g930680"
                    ],
                    "targets": [
                        "p1_g572291"
                    ]
                }
            ]
        }).then((res) => {
            this.addChildren(res.children || [])
            this.addEdges(res.edges || [])
            this.graph.resetCells(this.cells)
            this.graph.zoomToFit({
                padding: 20,
                maxScale: 1,
            })
        })
    },
    computed: {
        ...mapState({
            // 上传文件组件
            userId: (state) => state.user.id,
        }),
    },
    methods: {
        // 上传文件组件
        uploadBus() {
            // 模拟用户选择的文件
            const file = new File(["file content"], "filename.txt", { type: "text/plain" });
            // 打开文件选择框
            this.$EventBus.$emit("openUploader", {
                token: getToken(),
                prefixFlag: 1,
                userId: this.userId,
                fileObject: file
            });
        },
        //加载更多数据
        loadMore() {
            const newItems = Array.from(
                { length: 10 },
                (_, index) => ({
                    id: this.tableData.length + index,
                    name: `User ${this.tableData.length + index + 1}`,
                    date: `Date ${index + 1}`,
                    address: `xxxxxxxxxxxxxxxxxxxxxxx ${this.tableData.length + index + 1}`,
                })
            );
            this.tableData.push(...newItems);
        },
        // 清空数据
        clearData() {
            this.tableData = Array.from({ length: 10 }, (_, index) => ({
                id: this.tableData.length + index,
                name: `User ${this.tableData.length + index + 1}`,
                date: `Date ${index + 1}`,
                address: `xxxxxxxxxxxxxxxxxxxxxxx ${this.tableData.length + index + 1}`,
            }));
        }
    }
};
</script>
<style lang="scss" scoped>
.test-box {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: auto;
}

#container {
    height: 500px;
    width: 100%;
}
</style>